<template>
  <div>
    <Temp title="地形设置">
      <div class="terrain">
        <div
          @click="switchTerrain(index)"
          v-for="(item, index) in terrainList"
          :key="index"
          class="terrain-option"
          :class="{
            'terrain-option-active':
              currentTerrain === index
          }"
        >
          <div>
            <img :src="item.iconUrl" alt="" srcset="" />
          </div>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </Temp>
  </div>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'

const terrain = {}
export default {
  inject: ['viewerId'],
  components: {
    Temp
  },
  data() {
    return {
      currentTerrain: 0,
      terrainList: []
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    terrain[this.viewerId] = toolManager.terrain

    this.currentTerrain =
      terrain[this.viewerId].getCurrentIndex()
    this.terrainList = terrain[this.viewerId]
      .getList()
      .map((imagery) => {
        const { iconUrl, name, tooltip } = imagery
        return {
          iconUrl,
          name,
          tooltip
        }
      })
  },
  methods: {
    switchTerrain(index) {
      terrain[this.viewerId].switch(index)
      this.currentTerrain = this.terrainList[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.terrain {
  min-width: 200px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 10px;
  row-gap: 10px;
  background-color: #193b51;
  border-radius: 0 0 8px 8px;

  &-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    & > div:nth-child(1) {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      overflow: hidden;

      & > img {
        width: 100%;
        height: 100%;
      }
    }

    & > div:nth-child(2) {
      width: 50px;
      margin-top: 4px;
      font-size: 12px;
      color: #fff;
    }

    &-active {
      & > div:nth-child(1) {
        border: 2px solid rgba(255, 255, 255, 0.5);
      }

      & > div:nth-child(2) {
        color: rgb(0, 210, 255);
      }
    }
  }
}
</style>
